<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="缴费信息详情">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          style="display: flex; justify-content: space-between; flex-wrap: wrap"
        >
          <el-form-item label="缴费产品:">
            <el-input v-model="form.payname" size="medium" readonly></el-input>
          </el-form-item>
          <el-form-item label="缴费人员:" style="margin-right: 100px">
            <el-input v-model="form.username" size="medium" readonly></el-input>
          </el-form-item>
          <el-form-item label="缴费金额:" style="margin-right: 100px">
            <el-input v-model="form.paymoney" size="medium" readonly></el-input>
          </el-form-item>
          <el-form-item label="缴费优先级:" style="margin-right: 100px">
            <el-input v-model="form.paylevel" size="medium" readonly></el-input>
          </el-form-item>
          <el-form-item label="支付时间:" style="margin-right: 100px">
            <el-input v-model="form.paytime" size="medium" readonly></el-input>
          </el-form-item>
          <el-form-item label="支付状态:" style="margin-right: 100px">
            <el-input
              v-model="form.paystatus"
              size="medium"
              readonly
            ></el-input>
          </el-form-item>
          <el-row style="width: 100%">
            <el-col :span="21">
              <el-form-item
                label="支付类型"
                prop="costtype"
                style="width: 100%"
              >
                <el-radio disabled v-model="form.costtype" :label="1">
                  <img
                    src="http://property.admin.byesame.com/img/zfb1.4e5cf19b.png"
                    alt=""
                    width="100"
                /></el-radio>
                <el-radio disabled v-model="form.costtype" :label="2">
                  <img
                    src="http://property.admin.byesame.com/img/wx1.f21631b0.png"
                    alt=""
                    width="100"
                /></el-radio>
                <el-radio disabled v-model="form.costtype" :label="3">
                  <img
                    src="http://property.admin.byesame.com/img/ysf.a4d32ab5.png"
                    alt=""
                    width="100"
                  />
                </el-radio> </el-form-item
            ></el-col>
          </el-row>
          <el-form-item label="回复内容:" style="margin-right: 100px">
            <span>{{ form.costcontent }}</span>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="btn-box">
      <el-button type="primary" @click="goBack" size="medium">返回</el-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      form: {},
      token: localStorage.getItem("token"),
    };
  },
  created() {
    this.apply();
  },
  methods: {
    apply() {
      // console.log(this.$route.query.detailld);
      this.$axios({
        url: "/cost/getCostDetail",
        method: "GET",
        params: {
          id: this.$route.query.detailld, // 获取地址栏的id
          token: this.token,
        },
      }).then((res) => {
        console.log(res);
        this.form = res.data[0];
        const data = moment(this.form.paytime).format("YYYY-MM-DD hh:mm:ss");
        this.form.paytime = data;
        if (this.form.paystatus == 1) {
          this.form.paystatus = "已支付";
        } else {
          this.form.paystatus = "未支付";
        }
      });
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 500px;
}
.btn-box {
  position: fixed;
  top: 40%;
  right: 1%;
}
</style>